import React from 'react';
import { Link } from 'react-router-dom';
import { Button} from 'element-react';
import { Input } from 'element-react';
import { Table,value,setTime } from 'element-react';
import Top  from '../../top/index.js';
import Nav from '../../nav/index.js';
import './viewSend.css';
import axios from 'axios';
import util from '../../../assets/js/util.js';

class View extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
            imageList:[], //图片
            value: '',
            recycleOrderList:[],
            recycleOrderDeliveryList:[],
            options:[],
            columns: [
                    {
                     label: "回收品类",
                     prop: "typeName",
                     width: 180
                    },
                    {
                     label: "重量(kg)",
                     prop: "deliveryWeight",
                     width: 180,
                     render: function(data){
                        return (
                        <span>
                            <span>{data.deliveryWeight/1000}</span>
                        </span>)
                        }
                    },
                    {
                     label: "金额(元)",
                     prop: "price",
                     render: function(data){
                        return (
                        <span>
                            <span>{data.price/100}</span>
                        </span>)
                        }
                     
                    }
             ],
             data: [{
                 typeName: '',
                 Price: '',
                 deliveryWeight: '',
             }]
         }
    }

    componentDidMount(){
        var orderNum = this.props.match.params.orderNum;
        // 获取详情数据
        this.getRecycleDetails(orderNum);
       
    }

    setPayType(type){
        if(type == 1){
            return '现金支付';
        }else if(type == 2){
            return '银行卡转帐';
        }else{
            return '现金支付';
        }
    }
    setOrderStatus(status){
        var res ='';
        switch (status) {
            case 1:
                res='提交成功';
                break;
            default:
            case 2:
                res='接单成功';
                break;
            case 3:
                res='取货成功';
                break;  
            case 4:
                res='验货成功';
                break;
            case 5:
                res='结算成功';
                break;
           
        }
        return res; 
    }

    setTime(value){
        return util.getDateTime(value)
    }

    getRecycleDetails(orderNum) {
        var params = new URLSearchParams();
        params.append('orderNum', orderNum);

        axios.post('/count/countranking/selectdetails',params).then((data) => {
            console.log(data);
            let res = data.data;
            if(res.code == 0){
                let baseImgUrl = res.data.haoleiImageUrl;
                let repic = res.data.imageList;
                let picarr = [];
                for(let i = 0;i < repic.length;i++){
                    picarr.push(baseImgUrl + repic[i]);
                }
                 this.setState({
                     recycleOrderDeliveryList: res.data.recycleOrderDeliveryList,
                     recycleOrderList: res.data.recycleOrderList,
                     imageList:picarr
                 })
            }else{
                alert(res.msg);
            }
        }).catch((e) => {
            console.log(e)
        })
    }

    render() {
        return ( 
            <div className="view_main">
                <Top/>
                <Nav serviceSend="active"/>
               <div className="con">
                    <div className="top_line">
                        <div className="top_icon">
                           <span className="bg_1"></span>
                        </div>
                        <span className="look">查看</span>
                        {/*<span type = "info" className="return1"> 
                           <Link to="../serviceHouseSend">返回</Link>
                        </span>*/}
                    </div>
                    <div className="cont">
                         <div> 
                            <span className="left">
                                <Input prepend="分站" value={this.state.recycleOrderList.substationName} />
                            </span>
                            <span className="right">
                                <Input prepend="服务亭" value={this.state.recycleOrderList.houseName} />
                            </span>
                            
                         </div>
                         <div> 
                            <span className="left">
                                <Input prepend="交运单号" value={this.state.recycleOrderList.orderShipmentNo}/>
                            </span>
                            <span className="right">
                                <Input prepend="提交员工" value={this.state.recycleOrderList.operateName} />
                            </span>
                            
                         </div>
                         <div> 
                            <span className="left">
                                <Input prepend="交货单号" value={this.state.recycleOrderList.orderNum}/>
                            </span>
                            <span className="right">
                                <Input prepend="转运司机" value={this.state.recycleOrderList.driverName} />
                            </span>
                            
                         </div>
                         <div> 
                            <span className="left">
                                <Input prepend="交运时间" value={this.setTime(this.state.recycleOrderList.ctime)} />
                            </span>
                            <span className="right">
                                <Input prepend="提交时间" value={this.setTime(this.state.recycleOrderList.ctime)}/>
                            </span>
                            
                         </div>
                         <div> 
                            <span className="left">
                                <Input prepend="提交总重" value={this.state.recycleOrderList.netWeight/1000} />
                            </span>
                            <span className="right">
                                <Input prepend="支付金额(元)" value={this.state.recycleOrderList.orderDeliveryPrice/100}/>
                            </span>
                            
                         </div>
                         <div> 
                            <span className="left">
                                <Input prepend="运输净重" value={this.state.recycleOrderList.orderDeliveryWeight/1000}/>
                            </span>
                            <span className="right">
                                <Input prepend="订单状态" value={this.setOrderStatus(this.state.recycleOrderList.status)}/>
                            </span>
                            
                         </div>
                    </div>
                    <div className="table">
                          <Table
                            style={{width: '100%'}}
                            columns={this.state.columns}
                            data = {this.state.recycleOrderDeliveryList}
                            border={true}
                            onSelectChange={(selection) => { console.log(selection) }}
                            onSelectAll={(selection) => { console.log(selection) }}
                          />
                    </div>
                    <div className="photo">
                        {
                            this.state.imageList.map(
                                function(item,index){
                                    return <img src={item} className="checkimg"/>
                                }.bind(this)
                            )
                        }
                    </div>
               </div>
            
             </div>
        );
    }
}

export default View